<template>
  <div>
    <van-nav-bar left-text="返回" title="详情" left-arrow :fixed="true" @click-left="onClickLeft" />

    <div class="container">
      <div class="goods">
        <img :src="detail.image"/>
        <van-cell-group>
          <van-cell>
            <div class="goods-title">{{ detail.title }}</div>
            <div class="goods-title">{{ detail.etitle }}</div>
            <div class="goods-price">￥{{ detail.price }}</div>
            <div class="goods-brief">{{ detail.brief}}</div>
          </van-cell>

          <van-cell class="goods-express">
            <van-col span="17">激活方式——<a href="#">Steam平台</a>安装激活</van-col>
          </van-cell>
        </van-cell-group>

        <van-cell-group class="goods-cell-group">
          <!-- <van-cell value="进入店铺" icon="shop-o" is-link>
            <template slot="title">
              <span class="van-cell-text">有赞的店</span>

              <van-tag class="goods-tag" type="danger">官方</van-tag>
            </template>
          </van-cell> -->

          <!-- <van-cell title="发售时间" is-link>{{detail.time}}}</van-cell> -->
        </van-cell-group>

        <van-cell-group class="goods-cell-group">
          <van-cell title="购买数量">
            <van-stepper v-model="value" class="goods-cell-group-1"/>
          </van-cell>
        </van-cell-group>

        <div class="list">
          <p>用户评论</p>
          <van-grid :column-num="1">
            <van-grid-item v-for="(item,i) in detail1" :key="i">
              <!-- <p class="user">{{item.user.nickname}}</p> -->

              <p class="content">{{item.content}}</p>
            </van-grid-item>
          </van-grid>
        </div>

        <van-goods-action>
          <van-goods-action-icon icon="like-o" @click="addCollection()">收藏</van-goods-action-icon>

          <van-goods-action-icon icon="cart-o" to="/cart">购物车</van-goods-action-icon>

          <van-goods-action-button type="warning" @click="addCart()">加入购物车</van-goods-action-button>

          <van-goods-action-button type="danger" to="/cart">立即购买</van-goods-action-button>
        </van-goods-action>
      </div>
    </div>
  </div>
</template>

<script>

import api from "../api/api_pro";
export default {
  name: "detail",
  data() {
    return {
      detail: "",
      detail1: [],
      cartList:[],
      value:1
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    toCart(){
      this.$router.push("cart")
    },
    addCart(){
        let token1=localStorage.getItem('access-user');
        let token = JSON.parse(token1);
        console.log(token);
        let params = new FormData();

        params.append("u_id",token.data.id);
        params.append("g_id",this.$route.params.id);
        // let params={
        //   uid:token,
        //   pid:this.$route.params.id,
        //   //pnum:this.value
        // }
        console.log(params);
        api.addShopCart(params).then(res=>{

          if(res.code === 200)
          {
            console.log(res);
            this.$toast("加入购物车成功");
          }
          else
          {
            alert("fuck");
          }

        })
    },
    addCollection(){
        let token1=localStorage.getItem('access-user');
        let token = JSON.parse(token1);
        console.log(token);
        let params = new FormData();

        params.append("u_id",token.data.id);
        params.append("g_id",this.$route.params.id);
        // let params={
        //   uid:token,
        //   pid:this.$route.params.id,
        //   //pnum:this.value
        // }
        console.log(params);
        api.addCollection(params).then(res=>{

          if(res.code === 200)
          {
            console.log(res);
            this.$toast("收藏成功");
          }
          else if(res.code === 201)
          {
            this.$toast(res.msg);
          }

        })
    },
  },
  mounted() {
    let params = { id: this.$route.params.id };
    let params1 = { g_id: this.$route.params.id };
    api.getDetail(params).then(data => {
      this.detail = data.data;
    });
    api.comment(params1).then(res =>{
      console.log(res);
      this.detail1 = res.data;
  })
},
}
</script>

<style scoped>
.container {
  margin-top: 46px;
}
.goods {
  padding-bottom: 50px;
}
img{
      width: 100%;
      /* height: 280px; */
      display: block;
}
.list p{
  font-size: 15px;
  margin-left: 5%;
}
.content{

}
  .goods-title {
    font-size: 16px;
  }

  .goods-price {
    color: #f44;
  }

  .goods-express {
    color: #999;

    font-size: 12px;

    padding: 5px 15px;
  }

  .goods-cell-group {
    margin: 15px 0;
    }
    .van-cell__value {
      color: #999;
    }
.goods-comment{
  font-size: 15px;
  color: #000000;
}

  .goods-tag {
    margin-left: 5px;
  }
.goods-cell-group-1{
  float: right
}
</style>
